<script setup lang="ts">
import { h, ref, onMounted } from 'vue'
import {
  NSpace,
  NModal,
  NDataTable,
  NSpin,
  type DataTableColumns,
  useMessage,
  NEllipsis,
  NCarousel,
  NImageGroup
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import type { HttpResponsePagination } from '@/utils/http'
import { ChevronLeft12Filled, ChevronRight12Filled } from '@vicons/fluent'
import HeavenPersonDialog from './components/HeavenPersonDialog.vue'
import router from '@/router'

const message = useMessage()

//轮播图
const ImgList: any = ref([])
const queryImgList = async () => {
  const [error, res] = await sendRequest<HttpResponsePagination>({
    module: 'partAffairs',
    api: 'imgList',
    override: {
      params: {
        page: 1,
        limit: 10
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  ImgList.value = []
  res.data.list.map((i: any) => {
    if (i.status) {
      ImgList.value.push({
        orderIndex: i.orderIndex,
        path: i.sysAnnexFile?.path
      })
    }
  })
  console.log(ImgList.value)
}
queryImgList()

//左二
const columns: DataTableColumns = [
  {
    title: '党组织简称',
    key: 'name',
    width: 100,
    align: 'center',
    colSpan: (rowData) => (rowData.timeType == 0 ? 2 : 1),
    render: (e: any) => {
      return h(
        'div',
        {
          style: {
            cursor: 'pointer'
          },
          onClick: () => {
            partyCode.value = e?.partyCode
            modalVisiable.value = true
          }
        },
        { default: () => e?.name }
      )
    }
  },
  {
    title: '书记',
    key: 'mainPerson',
    width: 100,
    align: 'center'
  },
  {
    title: '人数',
    key: 'personNum',
    width: 100,
    align: 'center'
  }
]
const modalVisiable = ref(false)
const tableData = ref()
const loading = ref(false)
const partyCode = ref()
const queryTableData = async () => {
  const [error, res] = await sendRequest<HttpResponsePagination>({
    module: 'partAffairs',
    api: 'partWorkList',
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = res.data
}
queryTableData()

const typeList: any = ref([])
const getType = async () => {
  const [error, res] = await sendRequest({
    module: 'office',
    api: 'roomType',
    override: {
      params: {
        dicCode: 'A19'
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  typeList.value = []
  res.data.map((i: any) => {
    typeList.value.push({
      label: i.dicName,
      value: i.dicCode
    })
  })
  workType.value = typeList.value.find((i: any) => i.label == '党务公开')?.value
  showType.value = typeList.value.find((i: any) => i.label == '风采展示')?.value
  studyType.value = typeList.value.find((i: any) => i.label == '学习宝库')?.value
}

//党务公开-S
const changeWorkRight = (flat: any) => {
  workLoading.value = true
  if (workPage.value == 1 && flat) return (workLoading.value = false)
  if (Math.ceil(workList.value.length / 3) == workPage.value && !flat)
    return (workLoading.value = false)
  !flat ? (workPage.value += 1) : (workPage.value -= 1)
  if (workPage.value == 1) {
    workLoading.value = false
    return (workRealList.value = workList.value.slice(0, 3))
  }
  workRealList.value = workList.value.slice((workPage.value - 1) * 3, (workPage.value - 1) * 6)
  console.log(workRealList.value)
  workLoading.value = false
}

const workList = ref()
const workRealList = ref()
const workType = ref()
const workPage = ref(1)
const workLoading = ref(false)
const queryWorkList = async () => {
  workLoading.value = true
  const [error, res] = await sendRequest({
    module: 'partAffairs',
    api: 'partBuildList',
    override: {
      params: {
        type: workType.value,
        status: 'A0605'
      }
    }
  })
  if (error) return message.error(error.message)
  const tmp: any = res.data
  workList.value = tmp?.list
  workRealList.value = workList.value.slice(0, 3)
  workLoading.value = false
}
//党务公开-E

//风采展示-S
const changeShowRight = (flat: any) => {
  showLoading.value = true
  if (showPage.value == 1 && flat) return (showLoading.value = false)
  if (Math.ceil(showList.value.length / 6) == showPage.value && !flat)
    return (showLoading.value = false)
  !flat ? (showPage.value += 1) : (showPage.value -= 1)
  if (showPage.value == 1) {
    showLoading.value = false
    return (showRealList.value = showList.value.slice(0, 6))
  }
  showRealList.value = showList.value.slice((showPage.value - 1) * 6, (showPage.value - 1) * 12)
  showLoading.value = false
}

const showRealList = ref()
const showList = ref()
const showType = ref()
const showPage = ref(1)
const showLoading = ref(false)
const queryShowList = async () => {
  showLoading.value = true
  const [error, res] = await sendRequest({
    module: 'partAffairs',
    api: 'partBuildList',
    override: {
      params: {
        type: showType.value,
        status: 'A0605'
      }
    }
  })
  if (error) return message.error(error.message)
  const tmp: any = res.data
  showList.value = tmp?.list
  showRealList.value = showList.value.slice(0, 6)
  showLoading.value = false
}
//风采展示-E

//学习宝典-S
const changeStudyRight = (flat: any) => {
  studyLoading.value = true
  if (studyPage.value == 1 && flat) return (studyLoading.value = false)
  if (Math.ceil(studyList.value.length / 6) == studyPage.value && !flat)
    return (studyLoading.value = false)
  !flat ? (studyPage.value += 1) : (studyPage.value -= 1)
  if (studyPage.value == 1) {
    studyLoading.value = false
    return (studyRealList.value = studyList.value.slice(0, 6))
  }
  studyRealList.value = studyList.value.slice((studyPage.value - 1) * 6, (studyPage.value - 1) * 12)
  studyLoading.value = false
}
const studyRealList = ref()
const studyList = ref()
const studyType = ref()
const studyPage = ref(1)
const studyLoading = ref(false)
const queryStudyList = async () => {
  studyLoading.value = true
  const [error, res] = await sendRequest({
    module: 'partAffairs',
    api: 'partBuildList',
    override: {
      params: {
        type: studyType.value,
        status: 'A0605'
      }
    }
  })
  if (error) return message.error(error.message)
  const tmp: any = res.data
  studyList.value = tmp?.list
  studyRealList.value = studyList.value.slice(0, 6)
  studyLoading.value = false
}
//学习宝典-E

//跳转
const openWorkLink = (val: any) => {
  const tmp = val?.hyperlink
  if (tmp) {
    window.open(tmp)
  } else {
    router.push({
      path: '/OA/Affairs/BuildDetail',
      query: {
        id: val.id,
        show: true as never
      }
    })
  }
}

onMounted(async () => {
  await getType()
  await queryWorkList()
  await queryShowList()
  await queryStudyList()
})
</script>

<template>
  <div class="content">
    <div class="leftBox">
      <div class="leftImg">
        <NCarousel autoplay style="width: 100%; height: 100%">
          <NImageGroup show-toolbar-tooltip v-for="i in ImgList" :key="i.orderIndex">
            <img :src="i.path" style="width: 100%; height: 100%" />
          </NImageGroup>
        </NCarousel>
      </div>
      <div class="leftTwo">
        <NSpace justify="space-between">
          <NSpace justify="start">
            <div class="toptitle">
              <NSpace>
                <div style="width: 20px; height: 20px; line-height: 20px">
                  <img src="@/assets/images/leftOne_logo.png" style="width: 100%; height: 100%" />
                </div>
                <div class="font">信息系统</div>
              </NSpace>
            </div>
          </NSpace>
        </NSpace>
        <div style="margin-top: 10px">
          <NDataTable :bordered="false" :columns="columns" :data="tableData" :loading="loading" max-height="180px"
            striped />
        </div>
      </div>
      <div class="leftThree">
        <NSpace justify="space-between">
          <NSpace justify="start">
            <div class="toptitle">
              <NSpace align="center">
                <div style="width: 20px; height: 20px; line-height: 20px">
                  <img src="@/assets/images/leftTwo_logo.png" style="width: 100%; height: 100%" />
                </div>
                <div class="font">党务公开</div>
              </NSpace>
            </div>
          </NSpace>
          <NSpace justify="end">
            <div :class="workPage == 1 ? 'disabled_style' : 'title_left'" @click="changeWorkRight(true)">
              <ChevronLeft12Filled />
            </div>
            <div class="title_middle">{{ workPage }}</div>
            <div :class="Math.ceil(workList?.length / 3) == workPage ? 'disabled_style' : 'title_right'
              " @click="changeWorkRight(false)">
              <ChevronRight12Filled />
            </div>
          </NSpace>
        </NSpace>
        <div style="margin-top: 10px;flex: 1; overflow:hidden">
          <div v-if="workRealList?.length" style="height:100%">
            <NSpin :show="workLoading">
              <div class="ForBox" style="height:100%;display:flex;flex-direction:column;">
                <div class="itemBox" v-for="i in workRealList" :key="i.id" style="height:30%;margin-top:10px">
                  <div class="itemlogo">
                    <img src="@/assets/images/02@2x.png" style="width: 15px; height: 15px" />
                  </div>
                  <div class="item_left" @click="openWorkLink(i)">
                    <NEllipsis style="max-width: 600px;" :line-clamp="1">
                      {{ i.description }}
                      <template #tooltip>
                        <div style="max-width:600px">
                          {{ i.description }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="item_right">
                    {{ i.lastEditTime?.slice(0, 10) }}
                  </div>
                </div>
              </div>
            </NSpin>
          </div>
          <div v-else class="emptyBox">
            暂无数据
          </div>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="rightOne">
        <NSpace justify="space-between">
          <NSpace justify="start">
            <div class="toptitle">
              <NSpace>
                <div style="width: 20px; height: 20px; line-height: 20px">
                  <img src="@/assets/images/rightOne_logo.png" style="width: 100%; height: 100%" />
                </div>
                <div class="font">风采展示</div>
              </NSpace>
            </div>
          </NSpace>
          <NSpace justify="end">
            <div :class="showPage == 1 ? 'disabled_style' : 'title_left'" @click="changeShowRight(true)">
              <ChevronLeft12Filled />
            </div>
            <div class="title_middle">{{ showPage }}</div>
            <div :class="Math.ceil(showList?.length / 6) == showPage ? 'disabled_style' : 'title_right'
              " @click="changeShowRight(false)">
              <ChevronRight12Filled />
            </div>
          </NSpace>
        </NSpace>
        <div style="margin-top: 10px;flex: 1; overflow:hidden">
          <div v-if="showRealList?.length" style="height:100%">
            <NSpin :show="showLoading">
              <div class="ForBox" style="height:100%;display:flex;flex-direction:column;">
                <div class="itemBox" v-for="i in showRealList" :key="i.id" style="height:14%;margin-top:10px">
                  <div class="itemlogo">
                    <img src="@/assets/images/rightTwo_logo.png" style="width: 15px; height: 15px" />
                  </div>
                  <div class="item_left" @click="openWorkLink(i)">
                    <NEllipsis style="max-width: 600px;" :line-clamp="1">
                      {{ i.description }}
                      <template #tooltip>
                        <div style="max-width:600px">
                          {{ i.description }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="item_right">
                    {{ i.lastEditTime?.slice(0, 10) }}
                  </div>
                </div>
              </div>
            </NSpin>
          </div>
          <div v-else class="emptyBox">
            暂无数据
          </div>
        </div>
      </div>
      <div class="rightTwo">
        <NSpace justify="space-between">
          <NSpace justify="start">
            <div class="toptitle">
              <NSpace>
                <img src="@/assets/images/rightThree_logo.png" />
                <div class="font">学习宝库</div>
              </NSpace>
            </div>
          </NSpace>
          <NSpace justify="end">
            <div :class="studyPage == 1 ? 'disabled_style' : 'title_left'" @click="changeStudyRight(true)">
              <ChevronLeft12Filled />
            </div>
            <div class="title_middle">{{ studyPage }}</div>
            <div :class="Math.ceil(studyList?.length / 6) == studyPage ? 'disabled_style' : 'title_right'
              " @click="changeStudyRight(false)">
              <ChevronRight12Filled />
            </div>
          </NSpace>
        </NSpace>
        <div style="margin-top: 10px;flex: 1; overflow:hidden">
          <div v-if="studyRealList?.length" style="height:100%">
            <NSpin :show="studyLoading">
              <div class="ForBox" style="height:100%;display:flex;flex-direction:column;">
                <div class="itemBox" v-for="i in studyRealList" :key="i.id" style="height:14%;margin-top:10px">
                  <div class="itemlogo">
                    <img src="@/assets/images/rightFour_logo.png" style="width: 15px; height: 15px" />
                  </div>
                  <div class="item_left" @click="openWorkLink(i)">
                    <NEllipsis style="max-width: 600px;" :line-clamp="1">
                      {{ i.description }}
                      <template #tooltip>
                        <div style="max-width:600px">
                          {{ i.description }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="item_right">
                    {{ i.lastEditTime?.slice(0, 10) }}
                  </div>
                </div>
              </div>
            </NSpin>
          </div>
          <div v-else class="emptyBox">
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
  <NModal :auto-focus="false" v-model:show="modalVisiable">
    <HeavenPersonDialog title="党组织成员" :partyCode="partyCode" @close="modalVisiable = false" />
  </NModal>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f0efee;
}

.toptitle {
  display: flex;
  align-items: center;
}

.leftBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  height: 100%;
  padding-right: 20px;
  overflow: hidden;
  padding-bottom: 10px;

  .leftImg {
    width: 100%;
    height: 29%;
    border-radius: 5px;
  }

  .leftTwo {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 35%;
    background-color: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .leftThree {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 34%;
    background-color: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
  }
}

.rightBox {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: space-between;
  height: 100%;
  padding-right: 10px;
  overflow: hidden;
  padding-bottom: 10px;

  .rightOne {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 49%;
    background-color: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
  }

  .rightTwo {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 49%;
    background-color: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
  }
}

.title_middle {
  border-radius: 3px;
  width: 50px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  color: #5fb17f;
  text-align: center;
  border: 1px solid #5fb17f;
}

.title_left {
  position: relative;
  border: 1px solid #5fb17f;
  border-radius: 3px;
  width: 15px;
  height: 25px;
  line-height: 25px;
  color: #5fb17f;
  text-align: center;
  cursor: pointer;
}

.disabled_style {
  position: relative;
  border: 1px solid #5fb17f;
  border-radius: 3px;
  width: 15px;
  height: 25px;
  line-height: 25px;
  color: #5fb17f;
  text-align: center;
  opacity: 0.4;
  cursor: not-allowed;
}

.title_right {
  position: relative;
  border: 1px solid #5fb17f;
  border-radius: 3px;
  width: 15px;
  height: 25px;
  line-height: 25px;
  color: #5fb17f;
  text-align: center;
  cursor: pointer;

  .logo {
    position: absolute;
    margin-left: 3px;
  }
}

.ForBox {
  width: 100%;

  .itemBox {
    display: flex;
    align-items: center;
    background: #eaeaea;
    border-radius: 5px;
    padding-left: 10px;

    .itemlogo {
      display: flex;
      align-items: center;
      margin: 20px 15px 20px 5px;
    }

    .item_left {
      width: 80%;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .item_right {
      width: 15%;

    }
  }
}


.class-name {
  display: block;
  cursor: pointer;
}

.emptyBox {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  font-size: 26px;
}


:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}


:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
